<template>
    <div style="width:760px;height:80px;background:rgba(247,247,247,1);border-radius:20px;
    display: flex;align-items: center;justify-content: space-between;padding-left: 20px;padding-right: 50px">
        <div style="height:100%;
        display: flex;flex-direction: column;justify-content: space-between;
        padding-top: 13px;padding-bottom: 14px;box-sizing:border-box">
            <div style="display: flex;align-items: flex-end">
                <p style="font-size:18px;color:rgba(40,40,40,1);margin-left: 10px">{{job.name}}</p>
                <p style="font-size:14px;color:rgba(51, 51, 51, 1);margin-left: 30px">{{job.salary?job.salary.a:''}}</p>
                <p style="font-size:10px;color:rgba(51, 51, 51, 1);">{{job.salary?job.salary.b:''}}</p>
            </div>
            <div class="sub_text_group" style="display: flex;">
                <p>{{job.city}}</p>
                <p style="margin-left: 15px;margin-right: 15px">|</p>
                <p>{{job.workTime}}</p>
                <p style="margin-left: 15px;margin-right: 15px">|</p>
                <p>{{job.license}}</p>
                <p style="margin-left: 15px;margin-right: 15px">|</p>
                <p>{{job.num}}人</p>
            </div>
        </div>
        <p style="font-size: 14px;">发布时间：{{job.publishTime}}</p>
    </div>
</template>

<script>
  export default {
    name: 'MsgJobItem',
    props: {
      job: {
        type: Object,
        default() {
          return {
            name: '职位名称',
            salary: {
              a: '10-20W',
              b: '/2年'
            },
            city: '工作城市',
            workTime: '工作年限',
            license: '执业类型',
            num: '招聘人数',
            publishTime: '发布时间'
          }
        }
      }
    }
  }
</script>

<style scoped>
    p {
        font-weight: 400;
    }

    .sub_text_group {
        margin-left: 10px;
    }

    .sub_text_group > p {
        font-size: 14px;
        color: rgba(153, 153, 153, 1);
    }

</style>